typescript.mdx

import { A } from 'solid-start'; import { Description, Preact, Qwik, React, Solid, Title } from '~/components';

<Title>TypeScript</Title> Since the library is written in TypeScript and we put a lot of emphasis on the development experience, you can expect maximum TypeScript support.

TypeScript

Since the library is written in TypeScript and we put a lot of emphasis on the development experience, you can expect maximum TypeScript support.

Type-safe props

For example, to pass your form to another component via props, you can use the FormStore type to get type safety. Most of the types you can import can be found in our API reference.

import { createFormStore, Form, FormStore, Field } from '@modular-forms/solid';

type LoginForm = {
  email: string;
  password: string;
}

export function LoginPage() {
  const loginForm = createFormStore<LoginForm>();
  return <FormContent loginForm={loginForm} />
}

type FormContentProps {
  loginForm: FormStore<LoginForm>;
}

function FormContent(props: FormContentProps) {
  return (
    <Form of={props.loginForm}>
      <Field of={props.loginForm} name="email">
        {(field, props) => <input {...props} type="email" />}
      </Field>
      <Field of={props.loginForm} name="password">
        {(field, props) => <input {...props} type="password" />}
      </Field>
      <button type="submit">Login</button>
    </Form>
  );
}

import { component$ } from "@builder.io/qwik";
import { routeLoader$ } from '@builder.io/qwik-city';
import { useFormStore, Form, type FormStore, Field } from '@modular-forms/solid';

type LoginForm = {
  email: string;
  password: string;
};

export const useFormLoader = routeLoader$<InitialValues<LoginForm>>(() => ({
  email: '',
  password: '',
}));

export default component$(() => {
  const loginForm = useFormStore<LoginForm>({ loader: useFormLoader() });
  return <FormContent loginForm={loginForm} />
});

type FormContentProps {
  loginForm: FormStore<LoginForm>;
}

const FormContent = component$(({ loginForm }) => (
  <Form of={loginForm}>
    <Field of={loginForm} name="email">
      {(field, props) => <input {...props} type="email" />}
    </Field>
    <Field of={loginForm} name="password">
      {(field, props) => <input {...props} type="password" />}
    </Field>
    <button type="submit">Login</button>
  </Form>
));

import { Form, type FormStore, Field, useFormStore } from '@modular-forms/preact';

type LoginForm = {
  email: string;
  password: string;
}

export function LoginPage() {
  const loginForm = useFormStore<LoginForm>();
  return <FormContent loginForm={loginForm} />
}

type FormContentProps {
  loginForm: FormStore<LoginForm>;
}

function FormContent({ loginForm }: FormContentProps) {
  return (
    <Form of={loginForm}>
      <Field of={loginForm} name="email">
        {(field, props) => <input {...props} type="email" />}
      </Field>
      <Field of={loginForm} name="password">
        {(field, props) => <input {...props} type="password" />}
      </Field>
      <button type="submit">Login</button>
    </Form>
  );
}

import { Form, type FormStore, Field, useFormStore } from '@modular-forms/react';

type LoginForm = {
  email: string;
  password: string;
}

export function LoginPage() {
  const loginForm = useFormStore<LoginForm>();
  return <FormContent loginForm={loginForm} />
}

type FormContentProps {
  loginForm: FormStore<LoginForm>;
}

function FormContent({ loginForm }: FormContentProps) {
  return (
    <Form of={loginForm}>
      <Field of={loginForm} name="email">
        {(field, props) => <input {...props} type="email" />}
      </Field>
      <Field of={loginForm} name="password">
        {(field, props) => <input {...props} type="password" />}
      </Field>
      <button type="submit">Login</button>
    </Form>
  );
}